<template>
   <van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" />
  </van-swipe-item>
</van-swipe>
<div class="middle">
<div class="middleNav">
  <img src="/image4.png" alt="">
  <span>医学科普</span>
</div>
<div class="middleNav">
  <img src="/image5.png" alt="">
  <span>医学百科</span>
</div>
<div class="middleNav" @click="gotomyschedule">
  <img src="/image6.png" alt="">
  <span>我的日程</span>
</div>
</div>
<div class="serve">
  <div class="serveTop">
    <h3>服务</h3>
<a href="#">查看全部</a>
  </div>
  <div class="serveBox" @click="gotocompany">
    <h3>陪诊服务</h3>
    <img src="/image7.png" alt="">
    <span>个性化服务</span>
    <span>解决看病难</span>
  </div>
  <div class="serveBox" @click="gotohospitalcompany">
    <h3>院内陪护</h3>
    <img src="/image8.png" alt="">
    <span>差异化服务</span>
    <span>理解尊重</span>
  </div>
  <div class="serveBox">
    <h3>医疗知识</h3>
    <img src="/image9.png" alt="">
    <span>多方合作</span>
    <span>解答疑惑</span>
  </div>
  <div class="serveBox" @click="salarypage">
    <h3>工资结算</h3>
    <img src="/image10.png" alt="">
    <span>透明</span>
    <span>合理</span>
  </div>
  
  
</div>
<div class="bottom">
  <h3>最新</h3>
  <a href="#">查看全部</a>
  <div class="bottomimg">
    <img src="/image11.png" alt="">
  </div>
 
</div>
</template>
<script>
export default {
  setup() {
    const images = [
      '/imagea.png',
      '/imageb.png',
      '/imagec.png',

    ];
    return { images };
  },
  methods:{
    salarypage(){
      this.$router.push('salary');
    },
    gotocompany(){
      this.$router.push('companytotal');
    },
    gotohospitalcompany(){
      this.$router.push('hospitalcompany');
    },
    gotomyschedule(){
      this.$router.push('myschedule');
    }
  }
};
 
</script>
<style lang="less" scoped>
.van-swipe{
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  .van-swipe__track{
    .van-swipe-item{
      img{
        width: 100%;
        height: 4rem;

      }
    }
  }
}
.middle{
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
 background-color:white;

}
.middleNav{
  position: relative;
  display: inline-block;
  margin: 0.2rem;
  

}
.middleNav:hover{
  transform: scale(1.2);
  transition: transform 0.3s;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.middleNav img{
  display: block;
  max-width: 100%;
  width: 0.6rem;
  height: 0.6rem;
  height: auto;
  margin-bottom: 0.3rem;
}
.middleNav span{
  
  width: 1.2rem;
  position: absolute;
  bottom: -0.3rem;
  left: 0;
  font-size: 0.3rem;
  margin-left: -0.25rem;
 
}
.serveTop h3{
  margin-left: .6rem;
  margin-top: 50px;
  display: inline-block;
  font-weight: normal;
}
.icon{
 float: right;
}
.serveTop a{
  float: right;
  margin-top: 50px;
  margin-right: 20px;
  color: dodgerblue;
}
.serveBox{
  display: inline-block;
  margin-left: 45px;
  margin-bottom: 10px;
  width: 151px;
  height: 92px;

  
}
.serveBox:hover{
  transform: scale(1.2);
  transition: transform 0.3s;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.serveBox:nth-child(2){
  margin-top: 10px;
  background-color: #2A82E4;
}
.serveBox:nth-child(3){
  background-color: #29C1E3;
}
.serveBox:nth-child(4){
  background-color: #A5D63F;
}
.serveBox:nth-child(5){
  background-color: #FFC300;
}
.serveBox{
  border-radius: 10px;
}
.serveBox h3{
  margin-left: 5px;
  color: white;
}
.serveBox img{
  margin-top: 10px;
  width: 50px;
  height: 50px;
  float: left;
}
.serveBox span{
  margin-top: 10px;
  font-size: 16px;
  float: right;
  color: white;
  
}
.bottom h3{
  margin-left:0.6rem;
  font-weight: normal;
  display: inline-block;
}
.bottom a{
  float: right;
  margin-right: 20px;
  color:dodgerblue ;
}
.bottomimg{
  width: 7.14rem;

}
.bottomimg img{
  width: 100%;
  height: 100px;
}
</style>